<template>
  <div class="im">
    <div class="chat-panel bg-282830">
      <div class="chat-box">
        <div class="im-chat">
          <div class="im-chat-main">
            <div class="im-chat-main-left">
              <!-- 聊天内容显示区域 -->
              <div class="im-chat-main-box messages" id="message-box">
                <ul>
                  <li v-for="item in messageList" :class="{'im-chat-mine': item.username === username}">
                    <!-- 系统消息 -->
                    <div v-if="systemMsg(item.type)">
                      <div class="system-msg">{{ item.content }}</div>
                    </div>
                    <!-- 用户聊天消息 -->
                    <div v-else style="padding-left:20px;">
                      <!-- 事件及用户名 -->
                      <div class="im-chat-user">
                        <!-- 自己发送的消息 -->
                        <cite v-if="item.username === username">
                          <i>{{ item.timestamp }}</i> {{ item.username }}
                        </cite>
                        <!-- 其它人发送的消息 -->
                        <cite v-else>
                          {{ item.username }} <i>{{ item.timestamp }}</i>
                        </cite>
                      </div>

                      <!-- 消息内容 -->
                      <div class="im-chat-text">
                        <pre v-html="item.content"></pre>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>

              <!-- 聊天内容输入区域 -->
              <div class="im-chat-footer">
                <!-- 内容区域 -->
                <textarea v-model="messageContent" class="textarea" @keyup.enter="mineSend()"></textarea>

                <div class="im-chat-send">
                  <!-- 工具类：表情  -->
                  <div class="im-chat-tool">
                    <Icon type="ios-happy-outline" @click="showFaceBox()"></Icon>
                    <Faces
                      v-show="showFace"
                      @click="showFace = true"
                      class="faces-box"
                      @insertFace="insertFace"
                    ></Faces>
                  </div>
                  <Button @click="mineSend()">发送</Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import conf from "../../commons/Api";
import Faces from "../../components/faces";
import RequestUtils from "../../commons/RequestUtils";
const { transform, ChatType } = require("../../commons/ChatUtils");
import StoreUtils from '../../commons/StoreUtils'
import * as Const from '../../commons/Const'

import methods from "./methods";

export default {
  name: "chat",
  data() {
    return {
      host: conf.getHostUrl(),
      messageContent: '',
      showFace: false,
      headers: {
        "Access-Control-Allow-Origin": "*"
      }
    };
  },

  components: {
    Faces
  },

  computed: {
    messageList: {
      get: function() {
        return this.$store.state.messageList;
      },
      set: function(messageList) {
        this.$store.commit("setMessageList", messageList);
      }
    },

    // 获取当前用户名
    username: function () {
      return StoreUtils.getValue(Const.USERNAME)
    }

  },

  methods,

  watch: {},

  // 页面首次打开
  created: function() {},

  // 页面激活
  activated: function() {
    let self = this;
  },

  // 页面挂载到Vue中
  mounted: function() {
    // 清除消息
    this.$store.commit("clear");

    // 建立与服务端的连接
    RequestUtils.getInstance().webSocketOperation(this);
  }
};
</script>

<style lang="css">
@import "../../assets/css/show.css";
</style>

<style lang="scss">
@import "../../assets/css/chat.scss";
</style>
